<template>
  <transition name="fade">
    <cube-popup 
      v-show="visible"
      :mask-closable="true"
      :z-index=90
      position="bottom"
      type="shop-cart-list" 
      ref="myPopup2"
      @mask-click="maskClick"
    >
      <transition name="move">
        <div>
          <div class="list-header">
            <h2 class="list-title">购物车</h2>
            <span class="list-empty" @click="empty">清空</span>
          </div>
          <cube-scroll class="list-content" ref="listContent">
            <div class="food-list">
              <ul>
                <li 
                  class="list-selected" 
                  v-for="(item, index) in selectedFoods" 
                  :key="index"
                >
                  <span class="name">{{item.name}}</span>
                  <div class="price">
                    <span>￥{{item.count*item.price}}</span>
                  </div>
                  <div class="cart-control-wrapper">
                    <cart-control :food="item"></cart-control>
                  </div>
                </li>
              </ul>
            </div>
          </cube-scroll>
          <!-- 为了让购物车logo能正常置顶显示 -->
          <div class="cart-sticky" @click="hide">
            <div class="logo-wrapper">
              <div class="logo" :class="{'highlight': this.$store.getters.getAllFoodsCount.count>0}">
                <i class="icon-shopping_cart" :class="{'highlight': this.$store.getters.getAllFoodsCount.count>0}"></i>
              </div>
              <div class="num">
                <bubble :num="this.$store.getters.getAllFoodsCount.count"></bubble>
              </div>
            </div>
          </div>
          <div class="drop-ball">
            <drop-ball></drop-ball>
          </div>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>

<script>
  import CartControl from 'components/cart-control/cart-control'
  import Bubble from 'components/bubble/bubble'
  import DropBall from 'components/drop-ball/drop-ball'
  const EVENT_HIDE = 'hide'
  export default {
    name: 'shop-cart-list',
    data() {
      return {
        visible: false
      }
    },
    computed: {
      selectedFoods() {
        return this.$store.getters.getSelectedFoods
      },
      totalCount() {
        return this.$store.getters.getAllFoodsCount.count
      }
    },
    methods: {
      show() {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.listContent.refresh()
        })
      },
      hide() {
        this.visible = false
        // 点击mask蒙层的时候，向父组件派发一个事件，目的是另父组件shop-cart点击的时候，确保listFold=true
        this.$emit(EVENT_HIDE)
      },
      maskClick() {
        this.hide()
      },
      empty() {
        this.$createDialog({
          type: 'confirm',
          content: '是否清空购物车？',
          $events: {
            confirm: () => {
              this.$store.commit('empty')
              this.hide()
            }
          }
        }).show()
      }
    },
    watch: {
     totalCount(newVal) {
       if (!newVal) {
         this.hide()
       }
     }
    },
    components: {
      CartControl,
      Bubble,
      DropBall
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .cube-shop-cart-list
    bottom: 48px
    &.fade-enter, &.fade-leave-active
      opacity 0
    &.fade-enter-active, &.fade-leave-active
      transition all 0.3s ease-in-out
    .move-enter, .move-leave-active
      transform translate3d(0, 100%, 0)
    .move-enter-active, .move-leave-active
      transition all .6s ease-in-out 
    .list-header
      height 40px
      line-height 40px
      padding 0 18px
      border-bottom 1px solid rgba(7, 17, 27, 0.1)
      background-color $color-background-ssss
      .list-title
        float left
        font-size $fontsize-medium
        color $color-dark-grey
      .list-empty
        float right 
        font-size $fontsize-small
        color $color-blue 
    .list-content     
      max-height 217px
      padding 0 18px
      overflow hidden
      background-color #fff
      .list-selected
        position relative
        height 48px
        line-height 48px
        border-bottom-1px()
        &:last-child
          border-none()
        .name
          font-size $fontsize-medium
          color $color-dark-grey
          font-weight 700
        .price
          position absolute 
          right 90px
          bottom -2px
          span
            line-height 24px
            font-weight 700
            font-size $fontsize-medium
            color $color-red 
        .cart-control-wrapper
          position absolute
          right 0
          top 12px
    .cart-sticky
      position absolute
      z-index 300
      .logo-wrapper
        display inline-block
        vertical-align top
        position relative
        top -10px
        left: 12px
        width: 56px
        height: 56px
        border-radius: 50%
        box-sizing: border-box
        background-color: $color-background
        .logo
          width: 44px
          height: 44px
          border-radius: 50%  
          text-align: center
          background-color: $color-blue
          margin: 6px auto
          .icon-shopping_cart
            line-height: 44px
            font-size: $fontsize-large-xxx
            color: $color-white
        .num
          position absolute
          top 0
          right 0
    .drop-ball
      position absolute
      left 36px
      bottom -18px
</style>
